<template>
    <div class="chinaMap-container">
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>健康报备</el-breadcrumb-item>
            <el-breadcrumb-item>全国疫情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="20">
            <!--   左边疫情数据   -->
            <el-col :span="12" :offset="0">
                <el-tabs type="border-card">
                    <!--  疫情概览  -->
                    <el-tab-pane label="疫情概览">
                        <el-table v-loading="loading" border :data="infoData" style="width: 100%" height="495">
                            <el-table-column prop="name" label="名称" width="150"></el-table-column>
                            <el-table-column prop="value" label="数量">
                                <template slot-scope="scope">
                                    <el-tag effect="plain" size="mini">{{ scope.row.value }}人</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="yesterday" label="较昨日" width="100">
                                <template slot-scope="scope">
                                    <el-tag effect="plain" size="mini" v-if="scope.row.yesterday > 0" type="danger"
                                        >{{ scope.row.yesterday }} 人</el-tag
                                    >
                                    <el-tag effect="plain" size="mini" v-else type="success"
                                        >{{ scope.row.yesterday }}人</el-tag
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="时间">
                                <span style="font-size: 11px">{{ times }}</span></el-table-column
                            >
                        </el-table>
                    </el-tab-pane>
                    <!--  TOP10城市  -->
                    <el-tab-pane label="TOP10城市">
                        <el-table height="495" border :data="top10Data" style="width: 100%">
                            <el-table-column prop="name" label="城市名称" width="180"> </el-table-column>
                            <el-table-column prop="ename" label="English"> </el-table-column>
                            <el-table-column prop="jwsrNum" label="确诊人数" width="180">
                                <template slot-scope="scope">
                                    <el-tag
                                        v-text="scope.row.jwsrNum + '人'"
                                        size="mini"
                                        type="danger"
                                        effect="plain"
                                    ></el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>

            <!--   右边中国疫情地图   -->
            <el-col :span="12" :offset="0">
                <el-card>
                    <div ref="mapbox" style="height: 525px"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top: 10px">
            <el-table stripe :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.city" style="width: 100%">
                            <el-table-column prop="name" label="城市/区" width="200"></el-table-column>
                            <el-table-column sortable label="现存确诊" prop="econNum"></el-table-column>
                            <el-table-column sortable label="累计确诊" prop="cureNum"></el-table-column>
                            <el-table-column sortable label="疑似" prop="susNum"></el-table-column>
                            <el-table-column sortable label="死亡" prop="deathNum"></el-table-column>
                            <el-table-column sortable label="现存无症状" prop="asymptomNum"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column sortable label="省份" prop="name"></el-table-column>
                <el-table-column sortable label="现存确诊" prop="econNum"></el-table-column>
                <el-table-column sortable label="累计确诊" prop="value"></el-table-column>
                <el-table-column sortable label="疑似" prop="susNum"></el-table-column>
                <el-table-column sortable label="死亡" prop="deathNum"></el-table-column>
                <el-table-column sortable label="现存无症状" prop="asymptomNum"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js";
import jsonp from "jsonp";

const option = {
    title: {
        text: "疫情地图", // 主标题
        link: "https://news.sina.cn/zt_d/yiqing0121", // 链接
        subtext: "疫情地图", // 副标题
        sublink: "https://news.sina.cn/zt_d/yiqing0121",
    },
    series: [
        {
            // 图表类型
            name: "确诊人数", //对应的是鼠标触摸后的内容
            type: "map", //告诉echarts 渲染地图
            data: [],
            map: "china",
            label: {
                show: true, //显示各个省份名称
                fontSize: 10,
            },
            itemStyle: {
                areaColor: "#fff", //区域的背景颜色
            },
            emphasis: {
                //控制鼠标滑过时的高亮样式
                itemStyle: {
                    areaColor: "#c7fffd",
                },
            },
            roam: true, // 鼠标滚轮控制地图放大缩小，可拖拽
            zoom: 1.2, //控制地图的大小
        },
    ],
    visualMap: [
        {
            // 视觉映射组件
            type: "piecewise",
            show: true,
            splitNumber: 6, // 分成几条
            pieces: [
                {
                    // 手动分几条
                    min: 10000,
                }, // 不指定 max，表示 max 为无限大（Infinity）。
                {
                    min: 1000,
                    max: 9999,
                },
                {
                    min: 100,
                    max: 999,
                },
                {
                    min: 10,
                    max: 99,
                },
                {
                    min: 1,
                    max: 9,
                },
                {
                    min: 0,
                    max: 0,
                },
            ],
            //align:'right' // 默认是left
            inRange: {
                // 地图颜色
                symbol: "rect", // 图元的图形类别 图标的形状，还可以设置circle
                color: ["#fff", "#ffaa85", "#ff7b69", "#cc2929", "#8c0d0d", "#660208"],
            },
            itemHeight: 10,
            itemWidth: 20,
        },
    ],
    tooltip: {
        // 鼠标触摸显示
        trigger: "item",
    },
    toolbox: {
        // 可下载地图
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
            dataView: {
                // 数据视图
                readOnly: false,
            },
            restore: {}, // 刷新
            saveAsImage: {}, // 保存图片
        },
    },
};

export default {
    name: "Chinamap",

    data() {
        return {
            loading: false,
            infoData: [], //疫情概述表单数据
            top10Data: [], //Top10表单数据
            times: "", //时间
            tableData: [], //各省份表单数据数据
        };
    },

    mounted() {
        this.getData();
    },

    methods: {
        // 项目中用到的疫情实时动态接口数据来源新浪
        getData() {
            this.mychart = echarts.init(this.$refs.mapbox); //获取mapbox盒子
            jsonp(
                "https://interface.sina.cn/news/wap/fymap2020_data.d.json", //接口
                {},
                (err, data) => {
                    if (!err) {
                        //代表请求数据成功
                        console.log(data);
                        //从接口获取到数据后，使用map()函数，进行接口数据映射
                        let list = data.data.list.map((item) => ({
                            name: item.name,
                            value: item.value,
                        }));
                        option.series[0].data = list;
                        this.mychart.setOption(option);
                        this.tableData = data.data.list;

                        this.buildTable(data); //构建表格数据
                        this.mychart.setOption(option); //绘制疫情地图数据
                    }
                }
            );
        },
        /**
         * 构建表格数据:每日新增....
         */
        buildTable(data) {
            var data = data.data;
            let data1 = {
                name: "现存确诊",
                value: data.econNum,
                yesterday: data.add_daily["addecon_new"],
            };
            let data2 = {
                name: "累计境外输入",
                value: data.jwsrNum,
                yesterday: data.add_daily["addjwsr"],
            };
            let data3 = {
                name: "现无症状",
                value: data.asymptomNum,
                yesterday: data.add_daily["addasymptom"],
            };
            let data4 = {
                name: "现存确诊重症",
                value: data.heconNum,
                yesterday: data.add_daily["addhecon_new"],
            };
            let data5 = {
                name: "累计确诊",
                value: data.gntotal,
                yesterday: data.add_daily["addcon_new"],
            };
            let data6 = {
                name: "累计死亡",
                value: data.deathtotal,
                yesterday: data.add_daily["adddeath_new"],
            };
            let data7 = {
                name: "累计治愈",
                value: data.curetotal,
                yesterday: data.add_daily["addcure_new"],
            };
            let data8 = {
                name: "现存疑似",
                value: data.sustotal,
                yesterday: data.add_daily["wjw_addsus_new"],
            };
            this.times = data.times;
            this.top10Data = data.jwsrTop;

            this.infoData.push(data1);
            this.infoData.push(data2);
            this.infoData.push(data3);
            this.infoData.push(data4);
            this.infoData.push(data5);
            this.infoData.push(data6);
            this.infoData.push(data7);
            this.infoData.push(data8);
            this.loading = false;
        },
    },
};
</script>

<style scoped></style>
